<template>
  <h1>提取组件</h1>
  <nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
    <div class="hidden lg:flex lg:gap-x-12">
      <a href="#" class="head-a">Product</a>
      <a href="#" class="head-a">Features</a>
      <a href="#" class="head-a">Marketplace</a>
      <a href="#" class="head-a">Company</a>
    </div>
    <div class="hidden lg:flex lg:flex-1 lg:justify-end">
      <a href="#" class="text-sm font-semibold leading-6 text-gray-900">Log in <span
          aria-hidden="true">&rarr;</span></a>
    </div>
  </nav>

  <!-- 解决冲突  饿了吗冲突-->
  <div class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </div>
  <el-input style="width: 240px" class="my-4" placeholder="Please input" />




  <h1 class="small:text-zks lg:text-[10px] bg-red-500">扩展默认主题</h1>


  <!-- 在组件中 使用apply 只能通过tailwindss的plugin插件扩展 -->
  <!-- 当使用CSS变量作为任意值时，不需要将变量包装在 var(...) 中-只需提供实际的变量名称就足够了： -->
  <div class="  hover:bg-sky-700 text-[--my-color]">asdasd
  </div>

  <div class="zks">
    在vue的style标签中自定义类名
  </div>



  <div class="indigo common">clickMe</div>


  <ul class="ml-10">
    <li class="content-auto"> utilities的使用</li>
    <li class="content-auto"> utilities的使用</li>
    <li class="content-auto"> utilities的使用</li>
    <li class="content-auto"> utilities的使用</li>
  </ul>

</template>
<script setup></script>

<style scoped lang="scss">
.zks {
  /* color: var(--my-color); */
  @apply card;
}


@media (screen(md)) {
  .indigo {
    color: blue !important;
  }
}
</style>